<template>
    <div class="layout-map-container">
        <div id="fpiMapContainer"></div>
    </div>
</template>

<script setup lang="ts">
import config from '@/config'
import { getPublicFile } from '@/utils/tools'
import { useGlobalStore } from '@/store/global'

const globalStore = useGlobalStore()
// 初始化地图
const initMap = async () => {
    let jsonStyle = await fetch(getPublicFile('lib/mapbox/img.json')).then(res => res.json())
    // 在外网 ｜ 或者本地环境使用天地图
    if (location.hostname === 'stzw.epb.hangzhou.gov.cn' || config.isDev) {
        jsonStyle = await fetch(getPublicFile('lib/mapbox/out-img.json')).then(res => res.json())
    }

    window.glMap = new window.mapboxgl.Map({
        container: 'fpiMapContainer',
        ...config.mapInitOptions,
        style: jsonStyle,
        hash: false,
    })
}

// 监听地图加载完成
const addMapLoadedEventFn = () => {
    // window.glMap.on('load', async () => {
    //     globalStore.changeMapLoaded(true)
    // })
    window.glMap.once('style.load', async () => {
        globalStore.changeMapLoaded(true)
    })
}

onMounted(async () => {
    await initMap()
    addMapLoadedEventFn()
})
</script>

<style lang="scss" scoped>
.layout-map-container {
    position: relative;
    width: 100%;
    height: 100%;

    #fpiMapContainer {
        width: 100%;
        height: 100%;
    }
}
</style>
